<template>
  <div class="ts-cell" @click="toLink" :class="{
  'ts-cell-menu':theme==='menu','ts-cell-list':isList,'ts-cell-profile':isProfile}">

    <div class="ts-cell-title">
      <span v-if="isProfile" class="ts-cell-avator">
        <slot name="avatar"></slot>
      </span>
      <label v-if="!isProfile" class="ts-label" :style="{width:labelWidth}">{{title}}</label>
    </div>

    <div v-if="theme==='menu'" class="ts-cell-menu-value">
      <slot name="menuValue"></slot>
    </div>

    <div class="ts-cell-value">
      <div :class="{'ts-cell-middle':isProfile}">
        <span v-if="isProfile" class="title">{{title}}</span>
        <span v-if="isProfile" class="text">{{text}}</span>
        <input v-if="isList&&type!=='select'"
               @change="handleChange"
               @focus="toFocus"
               @blur="toBlur"
               :value="currentValue"
               :type="type"
               @input="handleInput"
               class="inputVal"
               :class="{'input-read':isReadonly,'input-edit':isEdit&&!currentValue}"
               :readonly="readonly||isReadonly"
               :id="id"
               :placeholder="isTip"/>
        <select v-else-if="type==='select'"
                @change="handleChange"
                @focus="toFocus"
                @blur="toBlur"
                :value="currentValue"
                @input="handleInput"
                :disabled="isReadonly?'disabled':false"
                class="inputVal"
                :class="{'input-read':isReadonly,'input-edit':isEdit&&currentValue===-1}">
          <option selected value="-1" class="select-tip" disabled>请选择</option>
          <option v-for="(item,index) in options" :value="item.value" :key="index">{{item.text}}</option>
        </select>
      </div>
    </div>

    <!-- 兼容date类型tip -->
    <span v-if="!currentValue&&type==='date'&&isEdit" class="ts-cell-tip">{{tip}}</span>

    <slot name="menuTips"></slot>

    <div class="ts-cell-ft" :class="{'ts-cell-hide':isEdit&&isLink||!!link}">
      <svg class="ts-cell-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12"
           height="24" viewBox="0 0 12 24">
        <image width="12" height="24"
               xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAQAAABkO9ThAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhCBMOETllUlclAAABFklEQVQoz2XSIUhDURTG8f/2Vh4IikWYKGIQDBPBIA6DC4KyMJllQUQRDjoQTaYtrgkWGewUg4pJ0T0RGbohsoFhScFgtmiz6NIMk+fevSeeH3zcy3dCpTce2ZA2xoT5YJ1DsCHJC1ktmOB4P81z0qSa31P1bgi1AR2mwSCbUjIAdIw6/azImQGgkzzgsiyeAaBx7oCk1Dqv8kcaLBHhUqcNAKmQoYdrjQWi/gLXOOKdOQtAdzngNYw9I4BrgebZ4ZN5I0q3KPLFrDwHQDOc0iIhT8EPLlAGFuUeIOKvZ7jAId1Z+6AxbnBZlav/ogAd5ZY+tuW4u0F0gApRchIo2In2UmWcfcmbnXtMoOzZxzDECVn7fH4BGYRQIvE86RAAAAAASUVORK5CYII="></image>
      </svg>
    </div>

  </div>
</template>

<script>
  /**
   * @desc 列表组件(配合Group组件使用)
   * @param [theme] cell主题 默认menu || list || profile
   * @param [text] profile 文本
   * @param [title] profile 标题
   * @param [type] cell的文本框或者type=select
   * @param [readonly] 文本框只读
   * @param [isLink] mode为isEdit 可显示箭头 '>'
   * @param [link] 点击cell前往的路由,自动显示箭头 '>'
   * @param [imgsrc] profile 头像地址
   * @param [tip] 文本框的placeholder提示
   * @param [options] select的选项
   * @param [id] input id,主要解决选择三级联动时文字居左
   * @param [mode] edit || readonly cell的只读和编辑模式切换
   * @param [value] v-model
   *
   * @slot menuValue theme=menu 可用
   *
   * @event [change] 修改input触发事件
   * @event [click] 单击cell触发事件
   */
  import {go} from '../../../utils/router'

  export default {
    name: 'tsCell',
    props: {
      title: [String, Number],
      text: [String, Number],
      type: String,
      readonly: [String, Boolean],
      theme: {type: [String, Number], default: 'menu'},
      isLink: Boolean,
      link: [String, Object],
      imgsrc: String,
      tip: String,
      options: [Object, Array],
      id: String,
      mode: String,
      labelWidth: Number,
      value: {}
    },
    data() {
      return {
        currentValue: this.value
      }
    },
    watch: {
      value(val) {
        this.currentValue = val;
      },
      currentValue(val) {
        this.$emit('input', val);
        this.$emit('change', val);
      }
    },
    methods: {
      handleInput(evt) {
        if (evt.target.value) {
          evt.target.style.textAlign = 'left';
        }
        this.currentValue = evt.target.value;
      },
      handleChange(evt) {
        if (this.type === 'select') {
          evt.target.style.direction = 'ltr';
          evt.target.style.color = '#020202'
        } else {
          this.$emit('change', this.currentValue)
        }
      },
      toLink(evt) {
        //延迟10毫秒，点击体验更好
        if (this.link && this.theme !== 'list') {
          if (this.theme === 'profile') go(this.link, this.$router);
          else setTimeout(() => {
            go(this.link, this.$router)
          }, 10);
        } else {
          this.$emit('click', evt);
        }
      },
      toFocus(evt) {
        document.getElementsByClassName('router')[0].style.height = document.body.clientHeight + 'px';
        // evt.target.style.textAlign = 'left';
        if (this.type !== 'select') {
          evt.target.style.color = '#020202';
        }
        evt.target.placeholder = '';
      },
      toBlur(evt) {
        if (!evt.target.value) {
          // evt.target.style.textAlign = 'right';
          evt.target.placeholder = this.tip;
        }
      }
    },
    computed: {
      isProfile() {
        return this.theme === 'profile';
      },
      isList() {
        return this.theme === 'list';
      },
      isReadonly() {
        return this.mode === 'readonly';
      },
      isEdit() {
        return this.mode === 'edit';
      },
      isTip() {
        if (!this.isReadonly && !this.currentValue) {
          return this.tip;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";

  input[type=date] {
    background-color: #FFFFFF;
    position: relative;
    left: -0.06rem;
  }

  $cellBorderColor: #E5E5E5;
  @mixin borderBefore($theme) {
    @if $theme == 'menu' {
      left: .22rem;
    } @else if ($theme=='list') {
      left: 0;
    }
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 1px;
    display: block;
    border-bottom: 1px solid #E5E5E5;
    transform-origin: 0 0;
    transform: scaleY(.6);
  }

  .ts-cell {
    position: relative;
    transform: translate3d(0, 0, 0);
    color: #2E2E2E;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    transition: all .2s;
    .ts-cell-title {
      flex: 1;
      .ts-label {
        display: block;
        white-space: nowrap;
      }
    }
    &.ts-cell-menu {
      font-size: .26rem;
      padding: .28rem .23rem;
      .ts-cell-title {
        width: 1.50rem;
        flex: none;
      }
      .ts-cell-menu-value {
        flex: 1;
      }
      &::before {
        @include borderBefore('menu');
      }
      &:active {
        background-color: #DDDDDD;
      }
    }
    &.ts-cell-list {
      font-size: .30rem;
      padding: .1005rem .25rem;
      &::before {
        @include borderBefore('list');
      }
      .ts-cell-title {
        flex: none;
        width: 1.70rem;
      }
      .ts-cell-value {
        color: #020202;
        flex: 1;
        .inputVal {
          width: 100%;
          text-align: left;
          direction: ltr;
          padding-right: .15rem;
          font-size: .30rem;
          @include wh(100%, .80rem);
          border: none;
          font-family: PingFangSC-Regular, Tahoma, Arial, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
        }
        // select {
        //   direction: rtl;
        // }
        .input-read {
          text-align: left;
          direction: ltr;
          color: #020202;
        }

        .input-edit {
          // direction: rtl;
          // text-align: right;
          color: #c6c6c6;
        }

        :-moz-placeholder {
          @include sc(.30rem, #c6c6c6)
        }

        ::-moz-placeholder {
          @include sc(.30rem, #c6c6c6)
        }

        input:-ms-input-placeholder {
          @include sc(.30rem, #c6c6c6);
        }

        input::-webkit-input-placeholder {
          @include sc(.30rem, #c6c6c6);
        }
      }
    }
    .ts-cell-tip {
      z-index: 2;
      color: #C6C6C6;
      right: .55rem;
      position: absolute;
      top: 50%;
      transform: translateY(-54%);
    }
    &.ts-cell-profile {
      padding: .17rem .25rem;
      &:active {
        background-color: #ececec;
      }
      &:before {
        @include borderBefore('menu');
      }
      .ts-cell-title {
        flex: none;
        .ts-cell-avator {
          margin-right: .20rem;
          display: block;
          @include wh(1.51rem, 1.51rem);
          border-radius: 100%;
          .user-avatar {
            border-radius: 100%;
            @include wh(1.51rem, 1.51rem);
          }
        }
      }
      .ts-cell-value {
        @include fja(space-between);
        flex: 1;
        .ts-cell-middle {
          margin-left: .1rem;
          flex: 1;
          width: 100%;
          span {
            display: block;
          }
          .title {
            @include sc(.30rem, #020202);
            font-weight: 600;
            margin-bottom: .10rem;
          }
          .text {
            @include sc(.26rem, #2E2E2E);
          }
        }
      }
    }
    .menu-tips {
      margin-right: .18rem;
      @include sc(.30rem, #909090);
    }
    .menu-tips-noLink {
      @include sc(.26rem, #909090);
      margin-right: -.18rem;
    }
    .ts-cell-ft {
      position: relative;
      visibility: hidden;
      @include fja();
      &.ts-cell-hide {
        visibility: visible;
        align-items: center;
      }
      .ts-cell-svg {
        position: relative;
        top: 1px;
        height: 13px;
      }
    }
  }
</style>
